<template>
  <el-container class="home-container">
    <!-- 布局排版 -->
    <!--头部布局-->
    <el-header>
      <div>
        <!-- <i  class="el-icon-school"></i> -->
        <span>医院后台管理系统</span>
      </div>
      <!-- 用户部分 -->
      <div>
        <div class="user">
          <!-- 用户头像 -->
          <el-avatar></el-avatar>
          <!-- 用户名 -->
          <el-link :underline="false">{{ username }}</el-link>
        </div>
        <!-- 退出按钮 -->
        <div class="logout">
          <!-- 加上事件名称，点击确认时促发退出系统 -->
          <el-popconfirm title="您确定要退出吗?" @confirm="logout">
            <i slot="reference" title="logout" class="el-icon-switch-button"></i>
          </el-popconfirm>
        </div>
      </div>
    </el-header>
    <el-container>
      <!-- 左边侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!--伸缩按钮-->
        <div class="toggle-button" @click="toggleCollapase">|||</div>
        <el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff" :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
          <!-- 一级菜单 -->
          <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="it.path!=='/user'?it.path:(pathFalse == 'ok'?it.path:undefined)" v-for="it in item.slist" :key="it.id" @click="savePath(it.path, it.title)">
              <template slot="title">
                <i :class="it.icon"></i>
                <span>{{ it.title }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <!-- 内容部分，加上二级路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Layoutindex',
  data() {
    return {
      // 左侧菜单
      menuList: [],
      isCollapse: false,
      // 被激活的连接
      activePath: '',
      pathFalse: '' ,
      username:'',
    };
  },
  // 类似onload
  created() {
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem('path'); //取出存放的路径
    const userStr = JSON.parse(localStorage.getItem('user'));
    this.username = userStr.username;
  },
  methods: {
    //退出系统跳转到登入界面
    logout() {
      localStorage.clear();
      this.$router.push('/login');
    },
    // 获取所有的导航菜单
    async getMenuList() {
      const { data: res } = await this.$http.get('menus');
      if (res.flag != 200) return this.$message.error('获取列表失败！');
      //访问成功数据回填
      this.menuList = res.menus;
    },
    //控制伸缩
    toggleCollapase() {
      this.isCollapse = !this.isCollapse;
    },
    //保存路径
    async savePath(path, title) {
      window.sessionStorage.setItem('path', path);
      if (title === '权限修改') {
        console.log(title);
        const userStr = JSON.parse(localStorage.getItem('user'));
        const { data: res } = await this.$http.post('/to_user', userStr);
        console.log(res);
        if (res.flag == 'ok') {
          this.pathFalse = res.flag;
          this.$message.success('您是超级管理员，有权限访问！！！');
        } else {
          this.$message.error('您不是超级管理员，暂无权限访问！！！');
        }
      } else {
        this.activePath = path;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100vh;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between; // 左右贴边
  align-items: center; //垂直居中
  padding-left: 0%; // 左边界
  align-items: center; // 水平
  color: #fff;
  font-size: 20px;
  > div {
    //左侧div加布局
    display: flex;
    align-items: center;
    span {
      margin: 0 5px 0 15px;
    }
    // 用户信息样式
    .user {
      display: flex;
      align-items: center; //垂直居中
      .el-avatar {
        margin-right: 15px;
      }
    }
    // 用户信息样式
    .user {
      display: flex;
      align-items: center; //垂直居中
      .el-avatar {
        margin-right: 15px;
      }
      .el-link{
        color: #999;
      }
    }
    // 退出按钮样式
    .logout {
      font-size: 20px;
      color: #999;
      cursor: pointer;
      padding: 0 10px 0 0;
    }
  }
}
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none; // 对其右边框
  }
}
.el-main {
  height: 90vh;
  background-color: #eaedf1;
}
// |||样式
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer; // 显示鼠标指针为：小手
}
</style>